<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-1.12.4.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/axios-0.18.0.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/antd.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/antd.css" />
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
		<link rel="stylesheet" type="text/css" href="css/message.css"/>
	</head>
	<body>
		<div id="app">
			<div style=" height: 50px;font-size: 20px;line-height: 50px;padding-left: 50px;">
				公告管理
			</div>
			<!-- 上 功能 -->
			<div id="" style="display: flex;  flex-wrap: nowrap;width: 100%; height: 40px;">
				<div id="" style="width: 80%;">
					<input type="button" onclick="window.location.href='postInsert.html'" value="+ 添加公告" style="background-color:blue;color: white;border-radius: 5px; margin-top: 5px;margin-left: 50px;border:2px solid blue "/>
				</div>
				<div id="" style="">
					<p style="margin-top: 10px;">共有数据：{{messageList.length}} 条</p>
				</div>
			</div>
			<br>
			
			<div id="" style="display: flex; flex-wrap: nowrap;margin-top: 30px;">
				<div id="" style="width: 60%;margin-left: 50px;">
					显示<select name="" class="num" @change="yeshu()" style="border: 1px solid white;">
						<option value="10">10</option>
						<option value="9">9</option>
						<option value="8">8</option>
						<option value="7">7</option>
						<option value="6">6</option>
						<option value="5">5</option>
						<option value="4">4</option>
						<option value="3">3</option>
						<option value="2">2</option>
						<option value="1">1</option>
					</select>条
				</div>
				<div id="" style="text-align: right;">
					从当前数据检索&nbsp;&nbsp;&nbsp;<input type="text" style="height: 25px;width:50%;" v-model="massagekey"/>
				</div>
			</div>
			
			
			<!-- 中 查询留言 -->
			<table border="" cellspacing="" cellpadding="" width="95%" align="center" style="margin-top: 20px;">
				
				<header>
					<th><input type="checkbox" name="" id="" value=""/></th>
					<th>公告主题</th>
					<th>发布者</th>
					<th>内容简略</th>
					<th>发表时间</th>
					<th>操作</th>
				</header>
				<tr v-for="(item,index) in findEmps" :key="index">
			        <td><input type="checkbox" name="" id="" value=""/></td>
					<td>{{item.gname}}</td>
					<td>{{item.author}}</td>
					<td>{{item.content}}</td>
					<td>
						{{item.time | timeFormat }}
					</td>
					<td>
						<span class="glyphicon glyphicon-pencil" aria-hidden="true"  @click="isUpdate(item.gid)"></span>
							&nbsp;
						<span class="glyphicon glyphicon-trash" aria-hidden="true"  @click="isDelete(item.gid)"></span>
					</td>
				</tr>
			</table>
			<!-- 下 分页 -->
			<div id="" style="display: flex;">
				<span style="margin-left: 50px;margin-top: 20px;">
					<span v-if="num==0">没有数据</span>
					<span v-else>显示 {{1+(pageSize*currentPage)}} 到 {{pageSize*(currentPage)+findEmps.length}}</span>
					， 共 {{num}} 条
				</span>
				<nav aria-label="Page navigation"  style="position: absolute;right: 0px;margin-right: 50px;">
				  <ul class="pagination">
				    <li  @click="prePage()">
				      <a href="#" aria-label="Previous">
				        <span aria-hidden="true">上一页</span>
				      </a>
				    </li>
					</ul>
					
					<ul class="pagination" v-for="index of pageNum" :key="index">
						<li @click="Page(index)"><a href="#">{{index}}</a></li>
					</ul>
					
					<ul class="pagination">
				    <li  @click="nextPage()">
				      <a href="#" aria-label="Next">
				        <span aria-hidden="true">下一页</span>
				      </a>
				    </li>
				  </ul>
				</nav>
				
			</div>
			
			
		</div>
	</body>
</html>
<script>
                
            
            </script>
<script type="text/javascript">
	var vm = new Vue({
		el: "#app",
		data: {
			//文章列表
			messageList:[],
			num:0,
			      // 所有页面的数据
			      totalPage: [],
			      // 每页显示数量
			      pageSize: 10,
			      // 共几页
			      pageNum: 1,
			      // 当前显示的数据
			      dataShow: "",
			      // 默认当前显示第一页
			      currentPage: 0,
				  
			massagekey:"",
			
		},
		beforeMount:function(){
			var _this=this;
			axios({
				method:"POST",
				url:"http://localhost:8080/Blogs_demo/post/queryAll",
				data:{}
			}).then(res=>{//成功
				console.log(res.data[0]);
				_this.messageList=res.data;
				
				    // 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
				    _this.pageNum = Math.ceil(_this.messageList.length / _this.pageSize) || 1;
					
					
					   for (let i = 0; i < _this.pageNum; i++) {
					      // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
					      // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
					      _this.totalPage[i] = _this.messageList.slice(_this.pageSize * i, _this.pageSize * (i + 1))
					    }
					   // 获取到数据后显示第一页内容
					    _this.dataShow = _this.totalPage[_this.currentPage];
						
				
			}).catch(err=>{//失败
				alert("服务异常！！！")
			})
			
		},
		methods:{
			//改变显示条数
			yeshu:function(){
				this.pageSize=$(".num").val();
			},
			
			//点击页数
			Page:function(index) {
			  this.dataShow = this.totalPage[index-1];
			  this.currentPage=index-1;
			},
			// 上一页和下一页
			// 下一页
			nextPage:function() {
			  if (this.currentPage === this.pageNum - 1) return ;
			  this.dataShow = this.totalPage[++this.currentPage];
			},
			// 上一页
			prePage:function() {
			  if (this.currentPage === 0) return ;
			  this.dataShow = this.totalPage[--this.currentPage];
			},
			
			//修改
			isUpdate:function(gid){
				window.location.href="./postUpdate.html?gid="+gid;
			},
			
			
			//删除
			  isDelete:function(gid) {
				 var _this=this;
				  var isOK=confirm("确认删除吗？");
				  if(isOK){
					  
					   axios({
							method:"POST",
							url:"http://localhost:8080/Blogs_demo/post/postDelete/"+gid,
							data:{}
						  }).then(res=>{//成功
							
							
							
							axios({
								method:"POST",
								url:"http://localhost:8080/Blogs_demo/post/queryAll",
								data:{}
							}).then(res1=>{//成功
								console.log(res.data[0]);
								_this.messageList=res1.data;
								
								    // 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
								    _this.pageNum = Math.ceil(_this.messageList.length / _this.pageSize) || 1;
									
									
									   for (let i = 0; i < _this.pageNum; i++) {
									      // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
									      // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
									      _this.totalPage[i] = _this.messageList.slice(_this.pageSize * i, _this.pageSize * (i + 1))
									    }
									   // 获取到数据后显示第一页内容
									    _this.dataShow = _this.totalPage[_this.currentPage];
										
								
							}).catch(err1=>{//失败
								alert("服务异常！！！")
							})
							
							
							
							
						  }).catch(err=>{//失败
							alert("服务异常！！！")
						  })
					  
				  }
				  
				  
				  
			}   
		},
        computed: {
                findEmps:function(){
                    var _this=this;
					_this.num=0;
					
					mess=[];
					
                     _this.messageList.filter(function(val){
						
                        if(val.content.indexOf(_this.massagekey)!=-1){
							mess.push(val)
							_this.num++
						}
						
                    })
					
					// 根据后台数据的条数和每页显示数量算出一共几页,得0时设为1 ;
					_this.pageNum = Math.ceil(mess.length / _this.pageSize) || 1;
					
					   for (let i = 0; i < _this.pageNum; i++) {
					      // 每一页都是一个数组 形如 [['第一页的数据'],['第二页的数据'],['第三页数据']]
					      // 根据每页显示数量 将后台的数据分割到 每一页,假设pageSize为5， 则第一页是1-5条，即slice(0,5)，第二页是6-10条，即slice(5,10)...
					      _this.totalPage[i] = mess.slice(_this.pageSize * i, _this.pageSize * (i + 1))
					    }
					   // 获取到数据后显示第一页内容
					    return _this.totalPage[_this.currentPage];
						
                }
	  
	  
	  
	  
	  
        },
		filters: {
				timeFormat: function(time) {
					var date = new Date(time);
	
					var strDate = date.getFullYear() + "-" + (date.getMonth()+1) + "-" + date.getDate() + "   " + date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds() ;
	
					return strDate;
	
				},
				zuihou:function(shuju){
					
						return this.num;
					
				}
		},
			

})
</script>
